<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            round
            class="avatar"
            :src="userInfo.photo"
            @click="chooseImg"
          />
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="onFileChange"
          />
        </template>
      </van-cell>
      <van-cell title="名称" is-link :value="userInfo.name" @click="nameShow" />
      <van-dialog
        v-model="show"
        title="名称"
        show-cancel-button
        :beforeClose="nameClose"
      >
        <van-field placeholder="请输入名称"  input-align="center" v-model="name"  v-fofo />
      </van-dialog>

      <van-cell
        title="生日"
        is-link
        :value="userInfo.birthday"
        @click="dateFn"
      />
      <van-datetime-picker
        v-show="dateShow"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="cancelDate"
        @confirm="changeBirth"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { changePhotoAPI, UserAPI, editUserInfo } from "../../api";
import { Notify } from "vant";
import { formatDate} from '../../utils/date'
export default {
  name: "UserEdit",
  data() {
    return {
      //存储用户信息
      userInfo: [],
      //k控制名称dialog 的显示
      show: false,
      name: "",
      dateShow: false,
      //最大最小日期和当前时间
      minDate: new Date(1920, 1, 1),
      maxDate: new Date(),
      currentDate: new Date(1999, 0, 1),
    };
  },
  async created() {
    await this.getUserInfo();
  },
  methods: {
    //获取用户所有信息
    async getUserInfo() {
      const res = await UserAPI();
      // console.log(res);
      this.userInfo = res.data.data;
      this.name = res.data.data.name;
    },
    // 通过点击头像，用js 触发 input框里面的change事件
    chooseImg() {
      //$ref 不是响应式的，只有在页面加载完成之后才会生效
      // setTimeout(() =>{
      //     // console.log(this.$ref.iptFile);
      //     this.$refs.iptFile.click()
      // },0)

      this.$refs.iptFile.click();
    },
    // 文件改变事件
    //上传文件的思路，使用 formdata 给后端传文件，后端接收之后返回 图片地址

    async onFileChange(e) {
      //先 new 一个 formdata对象，然后使用里面的append方法，以键值对的形式传递数据
      const thefd = new FormData();
      thefd.append("photo", e.target.files[0]);
      //   console.log(e.target.files[0]);
      //   console.log(thefd.get("photo"));
      // 发起请求
      const res = await changePhotoAPI(thefd);
      console.log(res);
      this.userInfo.photo = res.data.data.photo;
    },
    //修改姓名
    nameShow() {
      this.show = true;

      // const res = await editUserInfo(this.userInfo.name);

      // console.log(res);
    },
    //修改名称的弹窗出来之后
    async nameClose(action, done) {
      // console.log(action);
      if (action === "confirm") {
        let reg = /^[(A-Za-z0-9\u4e00-\u9fa5]{1,7}$/;
        if (reg.test(this.name) === true) {
          // 如果输入框的内容符合正则表达式的要求，就进行下一步操作
          // 发起请求
          const res = await editUserInfo({
            name: this.name,
          });
          this.userInfo.name = this.name;
          done();
          // console.log(res);
        } else {
          Notify({ type: "warning", message: "名称需为1-7位中英文字符串" });
          done(false);
        }
      } else {
        done();
        
      }
    },
    //打开日期选择器
    dateFn() {
      // this.maxDate = new Date()
      // console.log(maxDate);
      this.dateShow = true;
      this.currentDate = new Date(this.userInfo.birthday)
    },
    //取消按钮的事件
    cancelDate() {
      this.dateShow = false;
    },
    //时间选择确定按钮的事件
    async changeBirth(){
        var date = formatDate(this.currentDate)
        // console.log(date);
        const res = await editUserInfo({
            birthday:date ,
          });
          this.userInfo.birthday = date
           this.dateShow = false;
      // var year = new Date.getFullyear()
      // console.log(year);
      // this.dateShow = false;
    }
  },
};
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
/deep/ .van-dialog__content {
  text-align: center;
  input {
    border: none;
    outline: none;
  }
}
</style>
